<template>
    <div class="overall">
        <el-card class="good-detail">
            <div class="img_field">
                <img :src=detail.url>
            </div>
            <div class="right_field">
                <h4 class="good_title">{{detail.name}}</h4>
                <h5 class="good_description" v-html="detail.description"></h5>
                <h4 class="price_data">￥{{detail.totalPrice}}</h4>
                <h3 class="per_price">￥{{detail.pricePerPeriod}}/{{detail.leasePeriodDays}}天</h3> 
                <button class="main-btn" @click="addCart()">加入购物车</button>
                <button class="grey-btn" @click="goToPay(detail.strId)">现在购买</button>
                <button class="red-btn" @click="addCollect()">收藏</button>
            </div>
        </el-card>

        <el-card class="user_recommend">
            <div class="recommend_title">
                <h2>猜您喜欢</h2>
            </div>
            <div class="goods-box">
                <mall-good v-for="(item,index) in recGoods" :key="index" :msg=item.rentalGoods></mall-good>
            </div>
        </el-card>

    </div>
</template>

<script>
import mallGood from '../../../components/mallGood.vue'
export default {
    components:{
        mallGood
    },
    data(){
        return{
            detail:{},
            goodId:'',
            recGoods:[],
            cartForm:{
                rentalGoodsId:'',
                userId:'',
                isShoppingCart:true
            },
            collectForm:{
                rentalGoodsId:'',
                userId:'',
                isShoppingCart:false
            }
        }
    },
    methods:{
        async getDetail(id){
            const {data:res}=await this.$http.get('rent/rentalGoods/findByID/'+id)
            this.detail=res.data; 
            console.log(this.detail)  
        },
        goToPay(id){

            window.open('//' + window.location.host +window.location.pathname+ '/#/rentalOrder?Id=' + id)
        },
        async addCart(){
        this.cartForm.rentalGoodsId=this.goodId;
        this.cartForm.userId=1;
        const {data:res}=await this.$http.post('rent/RentalFavorite/add',this.cartForm);
        console.log(this.cartForm)
        console.log(res)
        if(res.code==200)
        {
          this.$message.success("添加成功!")
        }
      },
      async addCollect(){
        this.collectForm.rentalGoodsId=this.goodId;
        this.collectForm.userId=1;
        const {data:res}=await this.$http.post('rent/RentalFavorite/add',this.collectForm);
        console.log(this.collectForm)
        console.log(res)
        if(res.code==200)
        {
          this.$message.success("添加成功!")
        }
      },
      async getRecommend()
      {
          const {data:res}=await this.$http.get('rent/rentalItgRc/1')
          this.recGoods=res.data;
          console.log(res)
      }
    },
    created()
    {
        this.goodId=this.$route.query.Id;
        this.getDetail(this.goodId);
        this.getRecommend();
    }
}
</script>

<style lang="less" scoped>

.good-detail
{
    width:1200px;
    height:500px;
    margin:20px auto;
    padding:60px;
}
.img_field
{
    float:left;
    img{
        width:400px;
        height:400px;
    }
}
.right_field
{
    text-align: center;

    .good_title{
        font-size: 24px;
        line-height: 1.25;
        color: #000;
        margin-bottom: 13px;
        font-weight: 400;
    }
    .good_description{
        font-size: 14px;
        line-height: 1.5;
        color: #bdbdbd;
        font-weight: 400;
 
    }
    .price_data
    {
        color: #d44d44;
        font-weight: 700;
        font-size: 24px;
        line-height: 20px;
    }
}
.main-btn
    {
    width: 145px;
    height: 50px;
    line-height: 28px;
    vertical-align: middle;
    background-image: linear-gradient(180deg, #678ee7, #5078df);
    border: 1px solid #5c81e3;
    border-radius: 4px;
    margin-right:10px;
    font-size: 12px;
    color:#fff;
    cursor: pointer;
    &:hover {
      background-image: linear-gradient(180deg, #6c8cd4, #4769c2);
    }
    }
.grey-btn
    {
    width: 145px;
    height: 50px;
    line-height: 28px;
    vertical-align: middle;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    font-size: 12px;
    color:#646464;
    margin-right:10px;
    cursor:pointer;
    background-color: #f9f9f9;
    &:hover{
        background-color: #eee;
    }
    }
.red-btn
{
    width: 145px;
    height: 50px;
    line-height: 28px;
    vertical-align: middle;
    border: 1px solid #e1e1e1;
    background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);
    border-radius: 4px;
    font-size: 12px;
    color:#fff;
    cursor:pointer;
    background-color: #f9f9f9;
    &:hover{
        background-image: linear-gradient(to right, #e65c00 , #f9d423 );
    }
}
/deep/.el-card__body
{
    padding:0;
}
.user_recommend
{
    width:1320px;
    margin-bottom: 30px;
    margin-left:auto;
    margin-right: auto;;
    overflow: hidden;
    background: #fff;
    padding:0;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    border-color: rgba(0,0,0,.14);
    box-shadow: 0 3px 8px -6px rgb(0 0 0 / 10%);
    .recommend_title
    {
    padding-left: 30px;
    position: relative;
    z-index: 10;
    height: 60px;
    padding: 0 10px 0 24px;
    border-bottom: 1px solid #d4d4d4;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
    background: #f3f3f3;
    background: linear-gradient(#fbfbfb,#ececec);
    line-height: 60px;
    font-size: 18px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    }
}
.goods-box {
    width:1200px;  
    > div {
      float: left;
      border: 1px solid #efefef;
    }
  }
</style>